<template>
  <div class="w-full flex flex-row flex-wrap h-32" :class="props.center ? 'justify-center' : ''">
    <div v-for="(item, index) in props.data" :key="index" class="list-li" :class="item.onClick ? 'cursor' : ''"
         @click="item.onClick && item.onClick()">
      <span class="num-value">{{item.label}}: </span>
      <el-statistic v-if="item.type === 'amount'" :value="item.value || 0" prefix="￥"
                    :precision="item.precision">

      </el-statistic>
      <el-statistic v-else :value="item.value || 0"/>
    </div>
  </div>
</template>
<script setup name="NumberList">

import Template from "@/views/seller/template/components/linkForm/components/template.vue";

const props = defineProps({
  data: {
    type: Array,
    required: false,
    default: () => []
  },
  center: {
    type: Boolean,
    default: false,
    required: false
  }
})

</script>
<style scoped lang="scss">
.list-li {
  padding: 0 5px;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--el-color-error);
  font-family: 'PingFang Bold', sans-serif;
}

.num-value {
  font-size: 14px;
  font-family: 'PingFang Bold', sans-serif;
  color: var(--el-color-primary);
}

:deep(.el-statistic__prefix) {
  margin-right: -2px;
}

:deep(.el-statistic__content) {
  color: var(--el-color-error);
  font-size: 18px;
}

:deep(.el-statistic__head) {
  margin-bottom: 1px;
  margin-left: 5px;
}
</style>